<!-- 饼状图 -->
<style lang="stylus" scoped>
.piess
  height 100px
  background-size 100% 100%
  .main
    width 100%
    height calc(100% - 50px)
    margin-top -15px
</style>


<template>
<div class="piess">
  <div class="main"></div>
</div>

</template>

<script>
import echarts from 'echarts'
import header from 'components/header/header'
import filter from 'components/filter/filter'
import axios from 'axios'
import bus from 'src/bus'
export default {
  data() {
    return {
      legendArr: [],
      color: this.$store.state.color,
      styleArr: [],
      myChart: {},
      name: ''
    }
  },
  methods: {
    _init() {
      this.legendArr = this.myChart.getOption().series
      this.legendArr.forEach((data) => {
        data.selected = true;
      })
      this.$root.charts.push(this.myChart)
      window.addEventListener('resize', function() {
        this.myChart.resize()
      }.bind(this))
    }
  },
  components: {
    'v-header': header,
    'v-filter': filter
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.querySelector('.piess .main'))
    // 基于饼状图上的点击事件
    this.myChart.on("click", function(params) {
      localStorage.setItem('name', params.name)
      var count = [];
      var anzhi = [];
      if (params.name === "other") {
        return;
      } else if (params.name === "刑满释放人员") {
        $(officetotal).each(function() {
          count = this.split(",");
          count.pop()
          anzhi[anzhi.length] = count[0];
        })
      } else if (params.name === "吸毒人员") {
        $(officetotal).each(function() {
          count = this.split(",");
          count.pop()
          anzhi[anzhi.length] = count[1];
        })
      } else if (params.name === "社区矫正人员") {
        $(officetotal).each(function() {
          count = this.split(",");
          count.pop()
          anzhi[anzhi.length] = count[2];
        })
      } else if (params.name === "严重精神障碍患者") {
        $(officetotal).each(function() {
          count = this.split(",");
          count.pop()
          anzhi[anzhi.length] = count[3];
        })
      } else if (params.name === "特定利益群体") {
        $(officetotal).each(function() {
          count = this.split(",");
          count.pop()
          anzhi[anzhi.length] = count[4];
        })
      } else if (params.name === "赴京省访重点人员") {
        $(officetotal).each(function() {
          count = this.split(",");
          count.pop()
          anzhi[anzhi.length] = count[5];
        })
      } else if (params.name === "在逃人员") {
        $(officetotal).each(function() {
          count = this.split(",");
          count.pop()
          anzhi[anzhi.length] = count[6];
        })
      } else if (params.name === "邪教人员") {
        $(officetotal).each(function() {
          count = this.split(",");
          count.pop()
          anzhi[anzhi.length] = count[7];
        })
      }
      bus.$emit('count', anzhi);
    });
    var labelTop = {
      normal: {
        color: ['#FFC300'],
        label: {
          show: true,
          position: 'center',
          formatter: '{b}',
          textStyle: {
            baseline: 'top',
            color: '#189645',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        }
      }
    };
    var labelFromatter = {
      normal: {
        label: {
          formatter: function (params) {
            return 100 - params.value + '%'
          },
          textStyle: {
            baseline: 'bottom',
            color: '#189645',
            fontWeight: 'bold'
          }
        }
      }
    }
    var labelBottom = {
      normal: {
        color: '#ccc',
        label: {
          show: true,
          position: 'center'
        },
        labelLine: {
          show: false
        }
      },
      emphasis: {
        color: 'rgba(255,255,255,0.3)'
      }
    };
    var radius = [40, 55];
    function arrsum(arr) {
      var v = 0;
      if ($(arr).length > 0) {
        $(arr).each(function () {
          v += this - 0;
        });
      }
      return v;
    }
    var areaname = localStorage.getItem('areaname');
    var officetotal = [];
    axios.get(this.GLOBAL.BASE_URL + '/a/sys/area/mapData?name=' + areaname).then((res) => {
    // axios.get('static/data/Data.json').then((res) => {
      if (res) {
        var arr;
        var sum = 0;
        var compare = function (obj1, obj2) {
          var val1 = obj1.fangda - 0;
          var val2 = obj2.fangda - 0;
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        }
        res.data = res.data.sort(compare);
        $(res.data).each(function() {
          if (this.name === areaname) {
            arr = this.value.split(",");
            sum = arrsum(arr);
          } else {
            officetotal[officetotal.length] = this.value;
          }
        })
        var aa = [];
        var bb = [];
        $(arr).each(function() {
          aa[aa.length] = parseInt(this / sum * 100);
          bb[bb.length] = 100 - parseInt(this / sum * 100);
        })
        this.myChart.setOption({
          series: [
            {
              type: 'pie',
              center: ['15%', '30%'],
              radius: radius,
              x: '0%', // for funnel
              itemStyle: labelFromatter,
              data: [
                {name: 'other', value: bb[0], itemStyle: labelBottom},
                {name: '刑满释放人员', value: aa[0], itemStyle: labelTop}
              ]
            },
            {
              type: 'pie',
              center: ['35%', '30%'],
              radius: radius,
              x: '20%', // for funnel
              itemStyle: labelFromatter,
              data: [
                {name: 'other', value: bb[1], itemStyle: labelBottom},
                {name: '吸毒人员', value: aa[1], itemStyle: labelTop}
              ]
            },
            {
              type: 'pie',
              center: ['55%', '30%'],
              radius: radius,
              x: '40%', // for funnel
              itemStyle: labelFromatter,
              data: [
                {name: 'other', value: bb[2], itemStyle: labelBottom},
                {name: '社区矫正人员', value: aa[2], itemStyle: labelTop}
              ]
            },
            {
              type: 'pie',
              center: ['75%', '30%'],
              radius: radius,
              x: '60%', // for funnel
              itemStyle: labelFromatter,
              data: [
                {name: 'other', value: bb[3], itemStyle: labelBottom},
                {name: '特定利益群体', value: aa[3], itemStyle: labelTop}
              ]
            },
            {
              type: 'pie',
              center: ['15%', '75%'],
              radius: radius,
              y: '55%',   // for funnel
              x: '50%',    // for funnel
              itemStyle: labelFromatter,
              data: [
                {name: 'other', value: bb[4], itemStyle: labelBottom},
                {name: '严重精神障碍患者', value: aa[4], itemStyle: labelTop}
              ]
            },
            {
              type: 'pie',
              center: ['35%', '75%'],
              radius: radius,
              y: '55%',   // for funnel
              x: '20%',    // for funnel
              itemStyle: labelFromatter,
              data: [
                {name: 'other', value: bb[5], itemStyle: labelBottom},
                {name: '赴京省访重点人员', value: aa[5], itemStyle: labelTop}
              ]
            },
            {
              type: 'pie',
              center: ['55%', '75%'],
              radius: radius,
              y: '55%',   // for funnel
              x: '40%', // for funnel
              itemStyle: labelFromatter,
              data: [
                {name: 'other', value: bb[6], itemStyle: labelBottom},
                {name: '在逃人员', value: aa[6], itemStyle: labelTop}
              ]
            },
            {
              type: 'pie',
              center: ['75%', '75%'],
              radius: radius,
              y: '55%',   // for funnel
              x: '40%', // for funnel
              itemStyle: labelFromatter,
              data: [
                {name: 'other', value: bb[7], itemStyle: labelBottom},
                {name: '邪教人员', value: aa[7], itemStyle: labelTop}
              ]
            }
          ]
        });
        this._init()
      }
    });
  }
}

</script>
